<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.css" />
    <style>
      .panel {
        width: 900px;
        margin: 10px auto;
      }

      .table img {
        width: 40px;
        height: 40px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="panel panel-primary">
        <!-- Default panel contents -->
        <div class="panel-heading">英雄列表管理</div>
        <div class="panel-body">
          <!-- 存放的搜索区域 -->
          <form action="" autocomplete="off">
            <div class="row">
              <div class="col-lg-3">
                <input
                  type="text"
                  class="form-control"
                  placeholder="输入英雄名称"
                  name="name"
                />
              </div>
              <div class="col-lg-3">
                <select class="form-control" name="gender">
                  <option value="">--选择性别--</option>
                  <option value="男">男</option>
                  <option value="女">女</option>
                </select>
              </div>
              <div class="col-lg-3">
                <input
                  name="age"
                  type="text"
                  class="form-control"
                  placeholder="输入年龄"
                />
              </div>
              <div class="col-lg-3">
                <button type="button" class="btn btn-success" id="search">
                  搜索
                </button>
                <button type="button" class="btn btn-warning" id="reset">
                  重置
                </button>
                <button type="button" class="btn btn-primary" id="add">
                  添加
                </button>
              </div>
            </div>
          </form>
        </div>
        <table class="table table-bordered table-striped">
          <thead>
            <tr>
              <th>编号</th>
              <th>英雄名称</th>
              <th>英雄性别</th>
              <th>年龄</th>
              <th>操作区</th>
            </tr>
          </thead>
          <tbody id="tbody">
            <tr>
              <td>1</td>
              <td>大乔</td>
              <td>女</td>
              <td>18</td>
              <td>
                <button type="button" class="btn btn-danger">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 模态框 -->
      <div
        class="modal fade"
        id="myModal"
        tabindex="-1"
        role="dialog"
        aria-labelledby="myModalLabel"
      >
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button
                type="button"
                class="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title" id="myModalLabel">添加英雄</h4>
            </div>
            <div class="modal-body">
              <form class="form-horizontal" autocomplete="off">
                <div class="form-group">
                  <label for="" class="col-sm-2 control-label">英雄名称</label>
                  <div class="col-sm-10">
                    <input
                      type="text"
                      name="heroName"
                      class="form-control"
                      placeholder="输入英雄名称"
                    />
                  </div>
                </div>
                <div class="form-group">
                  <label for="" class="col-sm-2 control-label">性别</label>
                  <div class="col-sm-10">
                    <div class="radio">
                      <label>
                        <input
                          type="radio"
                          name="heroGender"
                          value="男"
                          checked
                        />
                        男
                      </label>
                    </div>
                    <div class="radio">
                      <label>
                        <input type="radio" name="heroGender" value="女" />
                        女
                      </label>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label for="" class="col-sm-2 control-label">年龄</label>
                  <div class="col-sm-10">
                    <input
                      type="number"
                      class="form-control"
                      placeholder="输入英雄年龄"
                      name="heroAge"
                    />
                  </div>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button
                type="button"
                class="btn btn-default"
                data-dismiss="modal"
                id="addFormCancel"
              >
                取消
              </button>
              <button id="submit" type="button" class="btn btn-primary">
                确认
              </button>
            </div>
          </div>
        </div>
      </div>
      <!-- 模态框 -->
    </div>
    <script src="./jquery/jquery.min.js"></script>
    <script src="./bootstrap/js/bootstrap.js"></script>
    <script>
      const list = [
        { id: 0, name: "大乔", gender: "男", age: 18 },
        { id: 1, name: "小乔", gender: "女", age: 20 },
        { id: 2, name: "鲁班", gender: "男", age: 48 },
        { id: 2, name: "后羿", gender: "女", age: 28 },
      ];
      let tbody = document.querySelector("#tbody");
      let name = document.querySelector('input[name="name"]');
      let gender = document.querySelector('select[name="gender"]');
      let age = document.querySelector('input[name="age"]');
      let search = document.querySelector("#search");
      let reset = document.querySelector("#reset");
      let add = document.querySelector("#add");
      let form_group = document.querySelector(".form-group");
      console.log(form_group);
      console.log(name, gender, age);
      function render(arr) {
        let res = arr.map((e, index) => {
          const { id, name, gender, age } = e;
          return ` <tr>
              <td>${id}</td>
              <td>${name}</td>
              <td>${gender}</td>
              <td>${age}</td>
              <td>
                <button type="button" class="btn btn-danger" data-index=${id}>删除</button>
              </td>
            </tr>`;
        });
        tbody.innerHTML = res.join("");
      }
      render(list);
      search.addEventListener("click", function () {
        const name1 = name.value.trim();
        const gender1 = gender.value.trim();
        const age1 = age.value.trim();
        const newSearch = list.filter((e) => {
          const validName = name1 === "" || name1 === e.name;
          const validGender = gender1 === "" || gender1 === e.gender;
          const validAge = age1 === "" || +age1 === e.age;
          return validName && validGender && validAge;
        });
        render(newSearch);
      });
      reset.addEventListener("click", function () {
        name.value = "";
        gender.value = "";
        age.value = "";
        render(list);
      });
      tbody.addEventListener("click", function (e) {
        const target = e.target;
        if (target.classList.contains("btn-danger")) {
          if (!confirm("您确定删除吗")) return;
          const index = target.dataset;
          // 根据id号找到对应对象，并且返回对象所在的索引号， 注意这里 index 是字符串型,
          const id = list.findIndex((ele) => +index === ele.id);
          list.splice(id, 1);
          render(list);
        }
      });
      add.addEventListener("click", function (e) {
        let arr = list;
        let number = arr.map(function (item) {
          return item.id;
        });
        console.log(number);
        let max = number[0] ? number[0] : 0;
        for (let i = 1; i < number.length; i++) {
          if (number[i] > max) {
            max = number[i];
          }
        }
        console.log(max);
        if (name.value != "" && gender.value != "" && age.value != "") {
          let arr = {
            id:max+1,
            name: name.value,
            gender: gender.value,
            age: age.value,
          };
          list.push(arr);
        }
        render(list);
      });
    </script>
  </body>
</html>
